import React from 'react'
import { sideMenuList } from './mockup'
import { Menu } from 'antd'
import styles from './SideMenu.module.css'
// import SubMenu from 'antd/lib/menu/SubMenu'

export const SideMenu: React.FC = () => {
  return (
    <Menu mode="vertical" className={styles["side-menu"]}>
      {
        sideMenuList.map((m, index) => (
          <Menu.SubMenu key={`side-menu-${index}`} title={m.title}>
            {
              m.subMenu.map((sm, sindex) => (
                <Menu.SubMenu key={`sub-menu-${sindex}`} title={sm.title}>
                  {sm.subMenu.map((sms, smsindex) => (
                    <Menu.Item key={`sub-sub-menu-${smsindex}`}><span>sms</span></Menu.Item>
                  ))}
                </Menu.SubMenu>
              ))
            }
          </Menu.SubMenu>
        ))
      }
    </Menu>
  )
}